<template>
  <div class="check">
    <a-breadcrumb style="background: #fff; padding: 10px 20px; margin-bottom: 5px">
      <a-breadcrumb-item v-if="identification"><a @click="clickLook">查看</a></a-breadcrumb-item>
      <a-breadcrumb-item v-if="!flag && identification">编辑</a-breadcrumb-item>
      <a-breadcrumb-item v-if="!flag2 && identification">详情</a-breadcrumb-item>
      <a-breadcrumb-item v-if="!identification"><a @click="flag2 = true">审批</a></a-breadcrumb-item>
      <a-breadcrumb-item v-if="!flag2 && !identification">审批</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row :gutter="10" v-show="flag && flag2">
      <a-col :xl="24" :lg="24" :md="24">
        <a-card>
          <div class="table-page-search-wrapper">
            <a-form-model
              ref="formCodition" :label-col="{ span: 4, style: 'width:110px;' }"
              :wrapper-col="{ span: 14, style: 'width:calc(100% - 110px)' }" layout="inline" :model="formCodition"
            >
              <a-row :gutter="48">
                <a-col :xl="8" :lg="8" :md="24">
                  <a-form-model-item label="市场信息分类" prop="infoType">
                    <!-- <a-select show-search optionFilterProp="children" v-model="formCodition.infoType"
                      placeholder="请选择市场信息分类" style="width: 100%" allowClear>
                      <a-select-option v-for="(item, index) in optionClassification" :key="index"
                        :value="item.dictionaryValue">
                        {{ item.dictionaryName }}
                      </a-select-option>
                    </a-select> -->
                    <a-input v-model="formCodition.infoType" placeholder="请输入市场信息分类" allowClear></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :xl="8" :lg="8" :md="24">
                  <a-form-model-item label="客户名称" prop="customName">
                    <a-input v-model="formCodition.customName" placeholder="请输入客户名称" allowClear></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :xl="8" :lg="8" :md="24" class="topBtn">
                  <a-form-model-item>
                    <span>
                      <a-button type="primary" @click="allEvents('search')">查询</a-button>
                      <a-button style="margin-left: 8px" @click="allEvents('reset')">重置</a-button>
                      <a-button
                        v-if="identification"
                        class="export"
                        style="margin-left: 8px"
                        @click="allEvents('export')"
                      >导出</a-button>
                    </span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <s-table
            ref="table" :columns="tables.columns" :scroll="{ x: '10000', y: 'calc(100vh - 500px)' }"
            :data="tables.loadData" :rowClassName="tableRowClass"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <span v-if="identification">
                  <span v-if="record.auditStatus == 1 || record.auditStatus == 4">
                    <a class="other" @click="allEvents('submit', record)">提交审批</a>
                    <a-divider type="vertical"/>
                  </span>
                  <!-- <span v-if="record.auditStatus == 3">
                    <a class="edit" @click="allEvents('export', record)">审批表</a>
                    <a-divider type="vertical" />
                  </span> -->
                  <span v-if="record.auditStatus == 20">
                    <a class="delete" @click="allEvents('recall', record)">撤回</a>
                    <a-divider type="vertical"/>
                  </span>
                  <span v-if="record.auditStatus == 1 || record.auditStatus == 4">
                    <a class="edit" @click="allEvents('edit', record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a class="delete" @click="allEvents('delete', record)">删除</a>
                    <a-divider type="vertical"/>
                  </span>
                  <a class="look" @click="allEvents('details', record)">详情</a>
                </span>
                <span v-else>
                  <a class="other" @click="allEvents('approve', record)">审批</a>
                </span>
              </template>
            </span>
          </s-table>
        </a-card>
      </a-col>
    </a-row>

    <div v-show="!flag">
      <marketInfoFill ref="marketInfoFill" @reset="reset" @cloneFlag="flag = true"/>
    </div>
    <div v-show="!flag2">
      <marketInfoDetails ref="marketInfoDetails" @reset="reset" :identification="identification"/>
    </div>
    <sumbitApprove ref="sumbitApprove" @reset="reset"/>
  </div>
</template>

<script>
import {
  marketInfoList, //列表
  marketInfoDelete,
  marketInfoExport,
  marketInfoRecall,
  marketInfoApprovalList,
} from '@/api/marketManagement/marketInfo/marketInfo';
import {
  getDictionariesList,
} from '@/api/common';
import marketInfoFill from '../marketInfoFill/marketInfoFill.vue';
import marketInfoDetails from '../components/marketInfoDetails.vue';
import sumbitApprove from '../components/sumbitApprove.vue';

export default {
  name: 'marketInfoLook',
  components: {
    marketInfoFill,
    marketInfoDetails,
    sumbitApprove,
  },
  props: {
    identification: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      optionClassification: [],
      flag: true,
      flag2: true,
      formCodition: {
        infoType: undefined,
        customName: undefined,
      },
      tables: {
        columns: [ {
          title: '序号',
          fixed: 'left',
          width: 61,
          customRender: (text, record, index) => `${ index + 1 }`,
        },
          {
            title: '市场信息分类',
            dataIndex: 'infoType',
            ellipsis: true,
            width: 250,
          },
          {
            title: '客户名称',
            dataIndex: 'customName',
            ellipsis: true,
            width: 100,
          },
          {
            title: '标题或关键词',
            dataIndex: 'infoTitle',
            ellipsis: true,
            width: 200,
          },
          {
            title: '信息相关区域',
            dataIndex: 'infoAreaName',
            ellipsis: true,
            width: 120,
          },
          {
            title: '信息上报人员',
            dataIndex: 'reporterName',
            ellipsis: true,
            width: 110,
          },

          {
            title: '信息上报单位',
            dataIndex: 'reporteCompanyName',
            ellipsis: true,
            width: 120,
          },
          {
            title: '信息获取日期',
            dataIndex: 'infoDate',
            ellipsis: true,
            width: 110,
          },
          {
            title: '信息来源',
            dataIndex: 'infoSource',
            ellipsis: true,
            width: 150,
          },
          {
            title: '客户或中间人的联系方式',
            dataIndex: 'infoContact',
            ellipsis: true,
            width: 150,
          },
          {
            title: '信息初筛结果',
            dataIndex: 'infoStatusName',
            ellipsis: true,
            width: 150,
          },
          {
            title: '跟踪状态',
            dataIndex: 'followStatusName',
            ellipsis: true,
            width: 150,
          },
          {
            title: '审批状态',
            dataIndex: 'auditStatus',
            fixed: 'right',
            ellipsis: true,
            width: 120,
            customRender: (text, record, index) => {
              return text == 1 ?
                '未提交' :
                text == 2 ?
                  '审批中' :
                  text == 3 ?
                    '已审核' :
                    text == 4 ?
                      '已驳回' :
                      text == 20 ?
                        '待审批' :
                        '';
            },
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            width: 280,
            scopedSlots: {
              customRender: 'action',
            },
          },
        ],
        loadData: (parameter) => {
          const params = Object.assign({}, parameter, this.formCodition);
          if (this.identification) {
            return marketInfoList(params).then((res) => {
              return res;
            });
          } else {
            return marketInfoApprovalList(params).then((res) => {
              return res;
            });
          }
        },
      },
    };
  },
  mounted() {
    this.getInit();
  },
  methods: {
    reset() {
      this.flag2 = true;
      this.flag = true;
      this.$nextTick(() => {
        this.$refs.table.refresh();
      });
    },

    tableRowClass(record, index) {
      if (record.dataStatus == 1 && record.planType != 3) {
        return 'redRow';
      } else {
        return 'rowClassName';
      }
    },

    clickLook() {
      if (!this.flag) {
        this.flag = true;
        this.$refs.marketInfoFill.allEvents('reset');
      } else {
        this.flag2 = true;
        this.$refs.marketInfoDetails.allEvents('cancel');
      }
    },
    allEvents(type, param, param1) {
      switch (type) {
        case 'search':
          this.$refs.table.refresh(true);
          break;
        case 'reset':
          this.$refs.formCodition.resetFields();
          this.$refs.table.refresh(true);
          break;
        case 'details':
          this.flag2 = false;
          this.$nextTick(() => {
            this.$refs.marketInfoDetails.init(param.id);
          });
          break;
        case 'edit':
          this.flag = false;
          this.$nextTick(() => {
            this.$refs.marketInfoFill.init(param.id);
          });
          break;
        case 'delete':
          var that = this;
          this.$confirm({
            title: '确定要删除该数据吗?',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              marketInfoDelete({
                id: param.id,
              }).then((res) => {
                that.$message.success('删除成功');
                that.$refs.table.refresh(true);
              });
            },
            onCancel() {},
          });
          break;

        case 'approve':
          this.flag2 = false;
          this.$nextTick(() => {
            this.$refs.marketInfoDetails.init(param.id);
          });
          break;
        case 'export':
          marketInfoExport(this.formCodition).then((res) => {
            this.fileExport(res, '市场信息收集登记表.xlsx');
          });
          break;
        case 'submit':
          this.$refs.sumbitApprove.init(param, false, '1');
          break;
        case 'recall':
          //撤回
          var that = this;
          this.$confirm({
            title: '是否确认此操作?',
            okText: '确定',
            okType: 'warning',
            cancelText: '取消',
            onOk() {
              marketInfoRecall({
                dataId: param.id,
                auditType: '1',
              }).then((res) => {
                that.$message.success('撤回成功');
                that.$refs.table.refresh();
              });
            },
            onCancel() {},
          });
          break;
      }
    },
    getInit() {
      getDictionariesList('5188d19a3b8c408f9e6408a41e2c0847').then((res) => {
        this.optionClassification = res || [];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ant-card {
  min-height: calc(87vh - 41px);
}

/deep/ .redRow {
  background: #fae3e3;
  text-align: center;
}
</style>